<template>
    <div class="el-card__body">
        <div v-for="item in list" :key="item.id">
            <div class="topbg">
                <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate"
                    @change="changeCheckAll(item)">
                    {{ item.name }}
                </el-checkbox>
            </div>
            <div class="p20">
                <el-checkbox-group v-model="item.checkedList" @change="changeCheckedsList(item)">
                    <el-checkbox v-for="citem in item.children" :key="citem.id" :label="citem.id">
                        {{ citem.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>

    <div class="save">
        <el-button type="primary" @click="save">保存</el-button>
        <!-- 清空只需要把 数组里面的每个  checkedIs 清空，控制一个 checkAll 和半选 -->
        <el-button @click="clear">清空</el-button>
    </div>
</template>

<script setup lang="ts">
import { user } from "@/request"
import { ElMessage } from "element-plus";
import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults";
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router"

const route = useRoute()

type ICategory = IResourceCategoryModel & { children: IRourceModel[], checkedList: number[], checkAll: boolean, isIndeterminate: boolean }

interface IState {
    list: ICategory[]
}

const state = reactive<IState>({
    list: []
})


// 查询所有后台资源请求
// user.getAllResourceCategoryApi()
// 查询后台资源分类管理请求
// user.getAllResourceApi()
// 获取当前用户相关资源请求
// user.getListRoleResourceApi
if (route.query.id) {
    Promise.all([user.getAllResourceCategoryApi(), user.getAllResourceApi(), user.getListRoleResourceApi(+route.query.id)]).then(([res1, res2, res3]) => {
        if (res1.code === 200 && res2.code === 200, res3.code === 200) {
            state.list = res1.data.map((item) => {
                return {
                    ...item, children: [], checkedList: [], checkAll: false, isIndeterminate: false
                }
            })
            res2.data.forEach(item => {
                const p = state.list.find((p) => p.id === item.categoryId)
                p?.children.push(item)
            })
            // console.log(state.list);

            state.list.forEach(item => {
                res3.data.forEach(citem => {
                    if (citem.categoryId === item.id) {
                        item.checkedList.push(citem.id)
                    }
                })
                // 对全选半选的判定
                // 全选
                item.checkAll = item.checkedList.length === item.children.length
                // 半选
                item.isIndeterminate = !item.checkAll && item.checkedList.length !== 0
            })
            // console.log(state.list);

        }
    })
}


// 全选事件
const changeCheckAll = (item: ICategory) => {
    // 如果为true就把每一个子类的id添加进选中数组,为false的话就是空数组没有选中的
    // console.log(item.checkAll);
    item.checkedList = item.checkAll ? item.children.map(citem => citem.id) : []
}

// 每个复选框事件
// 其实就是对全选还是半选的判定
const changeCheckedsList = (item: ICategory) => {
    // 全选
    item.checkAll = item.checkedList.length === item.children.length
    // 半选
    item.isIndeterminate = !item.checkAll && item.checkedList.length !== 0
}

// 点击保存
const save = () => {
    user.allocResourceApi({
        roleId: +(route.query.id as string),
        resourceIds: (state.list.map(item => item.checkedList).reduce((pre, cur) => { return pre.concat(cur) }, [])).length === 0 ? "" : state.list.map(item => item.checkedList).reduce((pre, cur) => { return pre.concat(cur) }, [])
    }).then(res => {
        ElMessage({
            type: res.code === 200 ? "success" : "error",
            message: res.message
        })
    })
}

// 点击清空
const clear = () => {
    state.list.forEach(item => {
        item.checkedList = []
        // 全选
        item.checkAll = item.checkedList.length === item.children.length
        // 半选
        item.isIndeterminate = !item.checkAll && item.checkedList.length !== 0
    })
}

const { list } = toRefs(state)
</script>

<style scoped lang="less">
.el-card__body {
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
    text-align: left;

    .topbg {
        background-color: #f2f6fc;
        padding: 20px;
    }

    .p20 {
        padding: 20px;

    }
}

.save {
    display: flex;
    justify-content: center;
}
</style>